<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>供货商</title>
<link rel="stylesheet" href="${ctx}/static/layui/css/layui.css">
</head>
<body>
	<script type="text/html" id="demoTable">
		昵称：
		<div class="layui-inline">
			<input class="layui-input" id="uname"
				autocomplete="off">
		</div>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 用户名：
		<div class="layui-inline">
			<input class="layui-input" id="username"
				autocomplete="off">
		</div>
		 <button class="layui-btn" onclick="selectSupplier()">搜索</button><br/>
 		 <a class="layui-btn layui-btn-xs" onclick="addUser()" style="width:60px;hight:60px;margin-top:5px;margin-left:30px" ><font size="4px"> 新增</a>
	</script>

	<table class="layui-table" id="aaa"
		lay-data="{height:400,page:true,toolbar:'#demoTable', url:'${ctx}/user/list'}"
		lay-filter="test">
		<thead>
			<tr>
				<th lay-data="{type:'checkbox', fixed: 'left'}"></th>
				<th lay-data="{field:'uid',fixed: true,hide:'true'}">用户ID</th>
				<th lay-data="{field:'uname'}">用户昵称</th>
				<th lay-data="{field:'username'}">用户姓名</th>
				<th lay-data="{field:'password'}">用户密码</th>
				<th lay-data="{field:'rolename'}">用户权限</th>
				<th
					lay-data="{fixed: 'right', width:178, align:'center', toolbar: '#barDemo'}">操作</th>
			</tr>

		</thead>
	</table>

	<div id="bbb" style="display: none;" class="layui-card-body">
		<form class="layui-form" id="form1" lay-filter="UserForm">
			<div style="display:none">
				<input type="text" name="uid">用户ID
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">用户昵称</label>
				<div class="layui-input-block">
					<input type="text" name="uname" required lay-verify="required"
						placeholder="请输入名称" autocomplete="off" class="layui-input">
				</div>
			</div>
			
			<div class="layui-form-item">
				<label class="layui-form-label">用户姓名</label>
				<div class="layui-input-block">
					<input type="text" name="username" required lay-verify="required"
						placeholder="请输入名称" autocomplete="off" class="layui-input">
				</div>
			</div>
			
			<div class="layui-form-item">
    			<label class="layui-form-label">用户密码</label>
   				 <div class="layui-input-inline">
     					 <input type="password" name="password" required lay-verify="required"
     					placeholder="请输入密码" autocomplete="off" class="layui-input">
    			</div>
		  	</div>
			
			<div class="layui-form-item">
				<label class="layui-form-label">权限ID</label>
				<div class="layui-input-block">
					<select name="rolename" lay-verify="required">
						<option value=""></option>
						<option value="1">1</option>
						<option value="2">2</option>
						<option value="3">3</option>
					</select>
				</div>
			</div>
			
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
	</div>


	<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>



	<script src="${ctx}/static/layui/layui.all.js"></script>
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<script>
		function selectSupplier() {
			var unameVal = $("#uname").val();
			var usernameVal = $("#username").val();
			layui.table.reload("aaa", {
				where : {
					uname : unameVal,
					username : usernameVal
				}
			});
		}

		var url;
		function addUser() {
			//页面层
			layer.open({
				type : 1,
				title:"新增",
				skin : 'layui-layer-rim', //加上边框
				area : [ '449px', '557px' ], //宽高
				skin: 'demo-class',
				content : $("#bbb"), //调到新增页面
				end : function() {
					$("#bbb").hide(); //关闭弹窗时继续隐藏页面
				}
			});
			url="${ctx}/user/add";
		}
		
		layui.use('form', function(){
			  var form = layui.form;
			  
			  //监听提交
			  form.on('submit(formDemo)', function(data){
				  /* console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
				  console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
				  console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
				  return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。 */
				  
				// console.log(JSON.stringify(data.field));//查看是否获取到了表单的值
				 
				 $.ajax({
					 url:url,
					 type:"post",
					 data:data.field,
					 success:function(res){
						 if(res.code=="success"){
							 layer.close(layer.index);//调用父级的layer来关闭弹窗
							 layer.alert(res.msg,{icon:1});
					     	console.log("ok");
					     	layui.table.reload("aaa")
						 }else{
							 layer.alert(res.msg,{icon: 5});
						 }
						 //重置表单
						 $("#form1")[0].reset();
						 layui.form.render();
					 },
					 error:function(){
						 layer.alert('操作失败！！！',{icon:5});
					 }
				 });
			    return false;
			  });
			});
		
		
		layui.use('table', function() {
			var table = layui.table;
			//监听行工具事件
			table.on('tool(test)', function(obj) {
				if (obj.event === 'del') {
					layer.confirm('确认删除该用户?', function(index) {
						$.ajax({
							url : '${ctx}/user/del',
							type : "post",
							data : {
								uid : obj.data.uid
							},
							success : function(data) {
								table.reload("aaa");
								if (data == 'ok') {
									layer.open({
										content : '删除成功!',
										time : 1000,
										icon : 1
									});
								} else {
									layer.open({
										content : '管理员不允许删除!',
										time : 1000,
										icon : 5
									});
								}
							},
							error : function() {
								layer.open({
									content : '未知错误!',
									time : 1000,
									icon : 5
								});
							}
						})
						layer.close(index);
					});
				} else if (obj.event === 'edit') {
					//页面层
					layer.open({
						type : 1,
						title:"编辑",
						skin : 'layui-layer-rim', //加上边框
						area : [ '449px', '557px' ], //宽高
						skin: 'demo-class',
						content : $("#bbb"), //调到新增页面
						end : function() {
							$("#bbb").hide(); //关闭弹窗时继续隐藏页面
							//重置表单
							 $("#form1")[0].reset();
							 layui.form.render();
						}
					});
					layui.form.val("UserForm",{
						"uid":obj.data.uid,
						"uname":obj.data.uname,
						"username":obj.data.username,
						"password":obj.data.password,
						"rolename":obj.data.rolename,
					})
					url="${ctx}/user/update";
					}	
			});
				
		});
		
	</script>
</body>
</html>